<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="团队人员详情"></my-header>
		<view class="main-body-e">
			<view class="dis_flex jus-con">
				<view class="_h1" style="color:rgba(0, 81, 186, 1);">基础信息</view>
				<view class="_h1">
					<u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon>
					<span @click="navigateTo('/pages/team/details-save')" style="color:rgba(0, 81, 186, 1);">编辑</span>
				</view>
			</view>
			<view class="dis_flex mar-top-10">
				<view class="dis_flex ali-ite mar-rig-10">
					<u-image width="140rpx" height="140rpx" src="http://xiaoguai.icon.img.congzhu.com/kongtouxiang.png">
					</u-image>
				</view>
				<view>
					<view class="mar-bot-2">
						<span>李欢</span>
						<span class="mar-lef-10">性别：女</span>
						<span class="mar-lef-10">出生日期：1992-09-07</span>
					</view>
					<view class="mar-bot-2">
						<span>婚姻状况：已婚已育</span>
						<span class="mar-lef-10">民族：汉</span>
					</view>
					<view class="mar-bot-2">
						<span>最后毕业院校：北京清华大学</span>
						<span class="mar-lef-10">学历：全日制专科</span>
					</view>
					<view class="mar-bot-2">
						<span>紧急联系人：李XX</span>
						<span class="mar-lef-10">15878391158</span>
						<span class="mar-lef-10">父女</span>
					</view>
					<view class="mar-bot-2">
						<span>现居住地：乐山市市中区XXXX</span>
					</view>
					<view class="mar-bot-2">
						<span>个人简历：<u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon></span>
					</view>
				</view>
			</view>
		</view>
		<view class="main-body-e mar-top-5">
			<view class="dis_flex jus-con">
				<view class="_h1" style="color:rgba(0, 81, 186, 1);">岗位信息</view>
				<view class="_h1">
					<u-icon name="edit-pen-fill" color="#2979ff" size="28"></u-icon>
					<span @click="navigateTo('/pages/team/details-save')" style="color:rgba(0, 81, 186, 1);">编辑</span>
				</view>
			</view>
			<view class="mar-top-10">
				<view class="mar-bot-2">
					<span>部门：内勤部</span>
				</view>
				<view class="dis_flex mar-bot-2">
					<span @click="zhiweixqShow = true">职位：内勤主管<u-icon name="arrow-right" color="#2979ff" size="22">
						</u-icon></span>
					<span class="mar-lef-10">职级：H4</span>
					<span class="mar-lef-10">岗位职责<u-icon name="arrow-right" color="#2979ff" size="22"></u-icon></span>
				</view>
				<view class="mar-bot-2">
					<span>直属领导：徐泽宇</span>
				</view>
				<view class="mar-bot-2">
					<span>直属下级：罗荣汇,米琴,江飞燕</span>
				</view>
				<view class="mar-bot-2">
					<span @click="xinzidaiyu">当前薪资待遇：基本工资3000<u-icon name="arrow-right" color="#2979ff" size="22">
						</u-icon></span>
				</view>
				<view class="mar-bot-2">
					<span>当前劳动合同期：2021-04-08 至 2022-04-07</span>
				</view>
				<view class="mar-bot-2">
					<span>转正时间：2019-04-08</span>
				</view>
				<view class="mar-bot-2">
					<span>入职时间：2019-03-09</span>
				</view>
				<view class="mar-bot-2">
					<span>入职来源：网招</span>
					<span class="mar-lef-10">BOSS直聘</span>
				</view>
				<view class="dis_flex jus-con mar-bot-2">
					<span>劳动合同：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
					<span>保密协议：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
					<span>技能证书：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
				</view>
				<view class="dis_flex jus-con mar-bot-2">
					<span>身份证明：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
					<span>学历证明：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
					<span>其他资料：<u-icon name="tags-fill" color="#2979ff" size="22"></u-icon></span>
				</view>
			</view>
		</view>
		<view class="main-body-e mar-top-5">
			<view class="dis_flex jus-con">
				<view class="_h1" style="color:rgba(0, 81, 186, 1);">通用管理</view>
			</view>
			<view>
				<u-grid :col="3">
					<u-grid-item>
						<u-icon name="photo" :size="40"></u-icon>
						<view>报销记录</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="file-text" :size="40"></u-icon>
						<view>申请记录</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="calendar" :size="40"></u-icon>
						<view>工作日志</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="bookmark" :size="40"></u-icon>
						<view>考勤记录</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="github-circle-fill" :size="40"></u-icon>
						<view>工资记录</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<!--职位详情弹窗-->
		<view>
			<u-modal v-model="zhiweixqShow" title="职位详情" :mask-close-able="true" :show-confirm-button="false"
				:title-style="tStyle">
				<view class="u-model-style">
					<u-time-line>
						<u-time-line-item nodeTop="2">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node" style="background: #19be6b;">
									<!-- 此处为uView的icon组件 -->
									<u-icon name="pushpin-fill" color="#fff" :size="22"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">晋升</view>
									<view class="u-order-desc">因工作态度认真负责，能力胜任，晋升为内勤主管</view>
									<view class="u-order-desc">晋升决策人：王子恒</view>
									<view class="u-order-time">2021-05-08 12:12</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">因应聘，担任公司内勤专员</view>
									<view class="u-order-desc">应聘面试人：王子恒</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</u-modal>
		</view>

		<!--薪资待遇弹窗-->
		<view>
			<u-modal v-model="xzShow" title="薪资待遇明细" :mask-close-able="true" :show-confirm-button="false"
				:title-style="tStyle">
				<view class="u-model-style">
					<view class="dis_flex jus-end mar-bot-5 zhuse">
						<view class="mar-rig-10">职位：内勤主管</view>
						<view>H4</view>
					</view>
					<u-table font-size="22">
						<u-tr>
							<u-th>项目</u-th>
							<u-th>金额</u-th>
							<u-th>备注</u-th>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">
								基础工资<u-icon class="pos-abs-rig" name="info-circle" color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>2500</u-td>
							<u-td>备注1</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">职位工资<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>500</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">职级工资<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>0</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">绩效工资<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>0</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">工龄工资<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>400</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">提成<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>5%</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">补助<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>200</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">全勤奖<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>100</u-td>
							<u-td>备注</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">年终奖<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>有</u-td>
							<u-td>根据当时政策制定</u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">社保<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>有</u-td>
							<u-td></u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">公积金<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td>200</u-td>
							<u-td></u-td>
						</u-tr>
						<u-tr>
							<u-td class="pos-rel">其他<u-icon class="pos-abs-rig" name="info-circle"
									color="rgba(0, 81, 186, 1)"></u-icon>
							</u-td>
							<u-td></u-td>
							<u-td></u-td>
						</u-tr>
					</u-table>
				</view>
			</u-modal>
		</view>

	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background: {
					backgroundColor: ' ',
				},
				zhiweixqShow: false,
				tStyle: {
					fontSize: '28rpx',
					color: 'rgba(0, 81, 186, 1);',
					fontWeight: 'bold'
				},
				xzShow: false,
				userList: '',
			}
		},
		components: {
			myHeader,
		},
		onLoad(param) {
			console.log(param)
			let id = param.id
			this.onSelect(id);
		},
		methods: {
			// 薪资待遇点击事件
			xinzidaiyu() {
				this.xzShow = true
			},
			// 首次查询人员信息
			async onSelect(id) {
				let data = {
					id: id
				}
				let res = await this.asyncPublic('/team/Details/onSelect', data)
				console.log(res)
				this.userList = res.data.data
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-order-title{
		font-size:28rpx !important;
	}
	.u-order-desc{
		font-size:22rpx !important;
	}
	.u-order-time{
		font-size:22rpx !important;
	}
	.pos-abs-rig {
		position: absolute;
		right: 8px;
		top: 33%;
	}

	.u-model-style {
		padding: 20px;
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.main {
		padding: 10px;
		position: relative;
		min-height: 100vh;
		background-image: linear-gradient(#005687, #E4E4E5);
	}

	page {
		height: 100%;
	}
	.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
</style>
